<template>
  <div class="h-full w-full flex flex-col pb-4">
    <div class="flex items-end p-4 flex-shrink-0 space-x-2">
      <a-button @click="zoomIn">放大</a-button>
      <a-button @click="zoomOut">缩小</a-button>
      <a-button @click="reset">还原</a-button>
    </div>
    <div class="bg-amber-200 flex-1 mx-4">
      <img
        :src="imgSrc"
        draggable="false"
        ref="imgRef"
        :style="imgStyle"
        class="bg-lime-400 preview_image"
        @mousedown="onMousedown"
      />
    </div>
  </div>
</template>

<script>
  import imgFile from '@/assets/logo.png';

  export default {
    name: 'ImagePreview',
    data() {
      return {
        imgSrc: imgFile,
        transform: {
          zoom: 1,
          translateX: 0,
          translateY: 0,
        },
      };
    },
    // props: {
    //   imgSrc: String,
    // },
    mounted() {
      //
    },
    computed: {
      imgStyle() {
        const { translateX, translateY, zoom } = this.transform;
        return {
          transform: `scale(${zoom}) translate(${translateX}px, ${translateY}px)`,
        };
      },
    },
    methods: {
      onMousedown(event) {
        const el = event.target;
        const elContainer = el.parentElement;
        const zoom = this.transform.zoom;

        const {
          x: elContainerX,
          y: elContainerY,
          width: elContainerWidth,
          height: elContainerHeight,
        } = elContainer.getBoundingClientRect();

        // 获取图片的当前位置
        let { x, y, width: elWidth, height: elHeight } = el.getBoundingClientRect();
        // 根据容器计算图片当前位置
        // 减掉的这个值是放大后图片的宽度的一半
        x = x - elContainerX;
        y = y - elContainerY;
        // if (zoom !== 1) {
        //   // x = x + (elWidth / 2) * zoom;
        //   // y = y + (elHeight / 2) * zoom;
        //
        //   x = x + (elWidth - elWidth / zoom) / 2;
        //   y = y + (elHeight - elHeight / zoom) / 2;
        // }

        console.log(x, y, elWidth, elHeight);

        // 获取鼠标按下的位置
        const mouseBeginX = event.clientX;
        const mouseBeginY = event.clientY;

        document.onmousemove = event => {
          // 计算鼠标拖动的距离
          const dx = event.clientX - mouseBeginX;
          const dy = event.clientY - mouseBeginY;

          // 计算图片在容器中的位置
          const elLeft = x + dx;
          const elTop = y + dy;

          // 限制图片的移动范围
          const translateX = Math.max(0, Math.min(elContainerWidth - elWidth, elLeft));
          const transLateY = Math.max(0, Math.min(elContainerHeight - elHeight, elTop));

          this.transform.translateX = translateX;
          this.transform.translateY = transLateY;

          // 阻止事件的默认行为，可以解决选中文本的时候拖不动
          return false;
        };

        document.onmouseup = () => {
          document.onmousemove = null;
          document.onmouseup = null;
        };
      },
      async zoomIn() {
        // 使用 JavaScript 的 zoom 函数放大图片
        // 并增加 zoom 变量的值
        if (this.transform.zoom >= 3) {
          return;
        }
        this.transform.zoom += 0.2;

        await this.$nextTick();
        let { width, height } = this.$refs['imgRef'].getBoundingClientRect();

        // this.transform.translateX += (width / 2) * this.transform.zoom;
        // this.transform.translateY += (height / 2) * this.transform.zoom;

        let x = this.transform.translateX;
        let y = this.transform.translateY;

        // if (x > 0) {
        //   x -= (width - width / this.transform.zoom) / 2;
        // }
        // if (y > 0) {
        //   y -= (height - height / this.transform.zoom) / 2;
        // }

        // if (x === 0) {
        //   x = (width - width / this.transform.zoom) / 2;
        // } else {
        //   x = x / 2 + (width - width / this.transform.zoom) / 2;
        // }
        //
        // if (y === 0) {
        //   y = (height - height / this.transform.zoom) / 2;
        // } else {
        //   y = y / 2 + (height - height / this.transform.zoom) / 2;
        // }

        // x += (width - width / this.transform.zoom) / 2;
        // y += (height - height / this.transform.zoom) / 2;

        this.transform.translateX = x;
        this.transform.translateY = y;
      },
      zoomOut() {
        // 使用 JavaScript 的 zoom 函数缩小图片
        // 并减小 zoom 变量的值
        if (this.transform.zoom <= 0.2) {
          return;
        }
        this.transform.zoom -= 0.2;
      },
      reset() {
        this.transform = {
          zoom: 1,
          translateX: 0,
          translateY: 0,
        };
      },
    },
  };
</script>

<style lang="less">
  * {
    margin: 0;
    padding: 0;
  }

  .image-preview {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .image-container {
    position: absolute;
    top: 30px;
    left: 30px;
    right: 30px;
    bottom: 30px;
    //display: flex; //align-items: center; //justify-content: center; overflow: hidden; background: antiquewhite;
    text-align: center;
  }

  .reset-button {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 10px;
    cursor: pointer;
  }

  .reset-button:hover {
    background-color: rgba(0, 0, 0, 0.8);
  }

  .preview_image {
    transition: transform 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  }
</style>
